<template>
  <div class="shop-content" ref="shop_content">
    <div class="shop-box" v-for="(item, i) in shopList" :key="i">
      <div class="top-text">
        <div class="left">
          <span>{{ item.name }}</span>
          <span v-show="item.remark">({{ item.remark }})</span>
        </div>
        <div class="right" @click="handelCheckMore(item)">
          查看更多
          <el-icon>
            <arrow-right-bold />
          </el-icon>
        </div>
      </div>
      <div class="box-shop">
        <div class="pic-box" v-for="(items, a) in item.productList" :key="a" @click="handelCheckDetails(items, item)">
          <div class="top-box">
            <img :src="items.mainPicUrl" alt="" style="width: 100%; height: 100%; object-fit: cover" />
          </div>
          <div class="bottom-box">
            <div class="s-text-a" :alt="items.productAliasName">{{ items.productAliasName }}</div>
            <div class="s-text-b">¥{{ items.businessLowestPrice }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import { useRouter } from "vue-router";
import { getCategoryProductList as categoryProductList } from "@/apis/shopHome/home";
import shopSelectStore from "@/store/modules/shopSelect";

const shopSelect = shopSelectStore();
const router = useRouter();
const shopList = ref([]);
// 卡片布局显示多少个
const num = ref(0);
// 获取dom
const shop_content = ref(null);
// 原始数据
const coyList = ref([]);
const getCategoryProductList = async () => {
  const { data } = await categoryProductList();
  shopList.value = data || [];
  // 拷贝一份数据
  const copy = JSON.stringify(data);
  window.sessionStorage.setItem("coyList", copy);
  coyList.value = JSON.parse(copy);
};

const handelCheckDetails = (items, item) => {
  shopSelect.setShopSelect(item);
  shopSelect.setShopDetail(items);
  const routeUrl = router.resolve({
    path: "/shopDetail/index",
    query: {
      id: items.productId
    }
  });
  window.open(routeUrl.href, "_blank");
};
const handelCheckMore = item => {
  shopSelect.setShopSelect(item);

  const routeUrl = router.resolve({
    path: "/shopCategories/index",
    query: {
      categoryId: item.categoryId
    }
  });
  window.open(routeUrl.href, "_blank");
};

getCategoryProductList();
onMounted(() => {
  console.log(shop_content.value.offSetWith);
  if (shop_content.value) {
    const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        // 获取个数
        num.value = (entry.contentRect.width / 335) | 0;
      }
    });

    resizeObserver.observe(shop_content.value);
    // 组件卸载时取消监听
    onUnmounted(() => {
      resizeObserver.disconnect();
    });
  }
});
watch(
  () => num.value,
  n => {
    const res = window.sessionStorage.getItem("coyList");
    shopList.value = JSON.parse(res);
    setTimeout(() => {
      shopList.value.length > 0
        ? shopList.value
        : [].map(it => {
            it.productList = it.productList.slice(0, n);
          });
    }, 1000);
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
@use "@/assets/styles/mixin";
.shop-content {
  padding: 0 20px;
  margin-top: 10px;

  .shop-box {
    margin-bottom: 30px;

    .top-text {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        cursor: pointer;

        span {
          &:nth-child(1) {
            font-weight: 400;
            font-size: 16px;
            color: #4e5969;
            line-height: 36px;
          }

          &:nth-child(2) {
            font-weight: 400;
            font-size: 12px;
            color: #86909c;
            line-height: 36px;
          }
        }
      }

      .right {
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
        color: #86909c;
        line-height: 24px;
        display: flex;
        align-items: center;
      }
    }

    .box-shop {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(289px, 1fr));
      grid-template-rows: 400px 0 0 0;
      overflow: hidden;
      justify-content: center;
      gap: 0 20px;
      .pic-box {
        margin-top: 5px;
        width: 100%;
        min-width: 289px;
        height: 400px;
        background-color: #ffffff;
        box-shadow: 4px 5px 16px 0 rgba(4, 19, 74, 0.04);
        border-radius: 10px;
        cursor: pointer;

        .top-box {
          margin: 0 auto;
          height: 250px;
          overflow: hidden;
          background: #ebebeb;
          box-shadow: 4px 0 4px 0 rgba(4, 19, 74, 0.1);
          border-radius: 10px;
        }

        .bottom-box {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;

          .s-text-a {
            width: 80%;
            text-align: center;
            height: 24px;
            margin-top: 26px;
            font-weight: 700;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #3d3d3d;
            margin-bottom: 8px;
            line-height: 24px;
          }

          .s-text-b {
            height: 24px;
            font-weight: 700;
            font-size: 16px;
            color: #4e5969;
            line-height: 24px;
          }
        }
      }
    }
  }
}
</style>
